<template>
	<view class="bg">
		<!-- 订单选项 -->
		<!-- 代码重复性高无所谓，能用就行 -->




		<!-- 商城订单信息 -->
		<view class="order-info" :class="selectedTab === 1?'order-infoActive2':'' " v-show="selectedTab === 1">
			<view class="info-item" :class="{ active1: selectedIndex === index }" v-for="(info, index) in shopOrderInfo"
				:key="index" @tap="selectOrderInfo(index)">
				<text class="text1"> {{ info }} </text>
			</view>
		</view>




		<!-- 商城订单信息 -->
		<!-- 全部 -->
		<view class="order-content">
			<view class="order-card" v-if="selectedIndex==0" v-for="(item,index) in shoppingOrder" :key="index">
				<view class="" @click="navigateToorderDetails(item.id)">
					<view class="content1">
						<view>
							<text class="text1">订单号: {{item.id}}</text>
						</view>
						<text class="text2" v-if="item.stateId === 1">待收货</text>
						<text class="text2" v-if="item.stateId === 2">已完成</text>
					</view>
					<view class="content2">
						<view class="just">
							<view class="cot2">
								<text class="text1"> 下单时间: {{item.createTime}}</text>
								<!-- <text class="text1">下单数量: </text> -->
							</view>

						</view>

					</view>
					<view class="content4">
						<view>
							<view>商品信息:</view>
							<view style="display: flex;">
								<view class="left">
									<image :src="getImage(item.images)" mode="widthFix"></image>
								</view>
								<view class="right">
									<view class="text">
										{{item.name}}
									</view>
								</view>
							</view>
						</view>
						<view class="text1">
							<text> 收货地址:</text>
							<text>{{item.addressId}}</text>
						</view>
						<view class="text1">
							<text>备注:</text>
							<text></text>
						</view>

					</view>
				</view>
				<view class="content5">

				</view>
			</view>
		</view>



		<!-- 待收货 -->
		<view class="order-content">
			<view class="order-card" v-if="selectedIndex==1 " v-for="(item,index) in waitOrder" :key="index">
				<view class="" @click="navigateToorderDetails(item.id)">


					<view class="content1">
						<view>
							<text class="text1">订单号: {{item.id}}</text>
						</view>
						<text class="text2" v-if="item.stateId === 1">待收货</text>
						<text class="text2" v-if="item.stateId === 2">已完成</text>
					</view>
					<view class="content2">
						<view class="just">
							<view class="cot2">
								<text class="text1"> 下单时间: {{item.createTime}}</text>
								<!-- <text class="text1">下单数量: </text> -->
							</view>

						</view>

					</view>
					<view class="content4">
						<view>
							<view>商品信息:</view>
							<view style="display: flex;">
								<view class="left">
									<image :src="getImage(item.images)" mode="widthFix"></image>
								</view>
								<view class="right">
									<view class="text">
										{{item.name}}
									</view>
									<!-- <view style="display: flex;">
										<view style="flex: 1; margin-left: 10rpx;">积分: {{item.value}}</view>
										<view style="flex: 1; margin-left: 100rpx; margin-top: 5rpx;">×1</view>
									</view> -->
								</view>
							</view>
						</view>
						<view class="text1">
							<text> 收货地址:</text>
							<text>{{item.addressId}}</text>
						</view>
						<!-- <view class="text1">
							<text> 联系电话:</text>
							<text>{{user.phone}}</text>
						</view> -->
						<view class="text1">
							<text>备注:</text>
							<text></text>
						</view>
					</view>
				</view>
				<view class="content5">


					<text class="text1" @click="submit(item.id)">确认收货</text>
				</view>


			</view>
		</view>


		<!-- 已完成 -->
		<view class="order-content">
			<view class="order-card" v-if="selectedIndex==2" v-for="(item,index) in completeOrder" :key="index">
				<view class="" @click="navigateToorderDetails(item.id)">


					<view class="content1">
						<view>
							<text class="text1">订单号: {{item.id}}</text>
						</view>
						<text class="text2" v-if="item.stateId === 1">待收货</text>
						<text class="text2" v-if="item.stateId === 2">已完成</text>
					</view>
					<view class="content2">
						<view class="just">
							<view class="cot2">
								<text class="text1"> 下单时间: {{item.createTime}}</text>
								<!-- <text class="text1">下单数量: </text> -->
							</view>

						</view>

					</view>
					<view class="content4">
						<view>
							<view>商品信息:</view>
							<view style="display: flex;">
								<view class="left">
									<image :src="getImage(item.images)" mode="widthFix"></image>
								</view>
								<view class="right">
									<view class="text">
										{{item.name}}
									</view>
									<!-- <view style="display: flex;">
										<view style="flex: 1; margin-left: 10rpx;">积分: {{item.value}}</view>
										<view style="flex: 1; margin-left: 100rpx; margin-top: 5rpx;">×1</view>
									</view> -->
								</view>
							</view>
						</view>
						<view class="text1">
							<text> 收货地址:</text>
							<text>{{item.addressId}}</text>
						</view>
						<!-- <view class="text1">
							<text> 联系电话:</text>
							<text>{{user.phone}}</text>
						</view> -->
						<view class="text1">
							<text>备注:</text>
							<text></text>
						</view>
					</view>
				</view>
				<view class="content5">


				</view>
			</view>
		</view>
	</view>



</template>

<script>
	import ShoppingApi from '@/common/FindingService/ShoppingApi.js';
	export default {
		data() {
			return {
				selectedTab: 1, // 默认选中第一个选项卡
				selectedIndex: 0, //选中的按钮变色
				recycleOrderInfo: ['全部', '待收取', '已完成', '已取消'],
				shopOrderInfo: ['全部', '待收货', '已完成'],
				goodsNum: 1,
				value6: 0,
				type: 'center',
				// 商城订单列表数组
				shoppingOrder: [],
				advanceOrder: [],
				cancelAppointmentOrder: [], //取消预约订单
				successAppointmentOrder: [], //已完成预约订单
				waitAppointmentOrder: [], //待收取预约订单
				data1: [], //把属于你选择的类型的商品全都放到里面后渲染
				orderIndex: '',
				show: false,
				userId: '',
				user: {},
				createTime: '',
				order: [],
				completeOrder: [],
				waitOrder: [],
			}
		},
		onLoad(query) {
			const backid = this.$route.query.backid;

		},
		computed: {

		},
		mounted() {
			this.userId = uni.getStorageSync('userId');

			this.allShoppingOrder()
			this.completeShoppingOrder()
			this.waitshop()
			this.cancelShoppingOrder()
		},
		beforeDestroy() {
			// 组件销毁前移除事件监听
		},
		methods: {
			//确认收货
			submit(id) {
				console.log('id', id);
				uni.showToast({
					title:"确认收货成功",
					icon: 'success',
					duration: 3000
				})
				.catch(error=>{
					uni.showToast({
					    title: '确认收货失败，请稍后再试',
					    icon: 'none',
					    duration: 3000
					});
				})
				ShoppingApi.verify(id).then(res => {
				      console.log('确认订单', res);
				      this.cancelShoppingOrder();
				      location.reload(); // 刷新页面
					});
			},
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},
			//返回
			goToBack() {
				uni.redirectTo({
					url: '/pages/my/my'
				})
			},
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},
			// 查询所有商品订单
			allShoppingOrder() {
				ShoppingApi.allOrderList(this.userId).then(res => {
					this.shoppingOrder = res.data.data
				})
			},
			// 查询已完成商品订单
			completeShoppingOrder() {
				let params = {
					userId: this.userId,
					stateId: '2'
				}
				ShoppingApi.completeOrderList(params).then(res => {
					this.completeOrder = res.data.data
				})
			},
			// 待发货
			waitshop() {
				let params = {
					userId: this.userId,
					stateId: '1'
				}
				ShoppingApi.completeOrderList(params).then(res => {
					this.waitOrder = res.data.data
					console.log('查询结果', this.waitOrder)
				})
			},
			
			cancelShoppingOrder() {
				let params = {
					userId: this.userId,
					stateId: '1'
				}
				ShoppingApi.cancelOrder(params).then(res => {
					this.cancelOrder = res.data.data
					console.log('55:', this.cancelOrder)
				})
			},
			// 二级标签转换
			selectOrderInfo(index) {
				this.selectedIndex = index;
			},
			navigateToorderDetails(id) {
				uni.request({
					url: `http://43.136.172.73/api/v1/order/${id}`,
					method: 'GET',
					data: id,
					header: {
						'Authorization': 'sfsdf',
					},
					success: (res) => {
						this.order = res.data.data; // 假设响应数据为订单对象
						this.createTime = this.order.createTime;
						this.addressId = this.order.addressId;
						uni.navigateTo({
							url: '/pages/purchase/shoppingOrder/shoppingOrder?id=' + id +
								'&createTime=' + this.createTime + '&addressId=' + this.addressId
						});
					},
					fail: (err) => {
						console.error('获取订单详情失败:', err);
					}
				});
			},

			close() {
				this.show = false
			},
			// 根据订单 ID 取消订单
			cancelOrder() {
				// 获取订单 ID
				const orderId = 'YOUR_ORDER_ID';

				// 从订单列表中删除订单信息
				this.deleteOrder(orderId, "shoppingOrder");

				// 将取消的订单信息添加到已取消订单列表中
				this.addToCancelledOrders(orderId, "cancelledAdvanceOrders");
			},
			deleteOrder(orderId, orderList) {
				// 在指定订单列表中删除订单信息
				const index = this[orderList].findIndex(item => item.id === orderId);
				if (index !== -1) {
					this[orderList].splice(index, 1);
				}
			},
			addToCancelledOrders(orderId, cancelledOrderList) {
				// 根据订单 id 获取取消的订单信息
				const cancelledOrder = this.shoppingOrder.find(item => item.id === orderId);

				// 新增取消的订单信息到已取消订单列表中
				this[cancelledOrderList].push(cancelledOrder);
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	//顶部标题
	.content-title {
		background-color: #fff;
		color: #000;
		font-weight: bold;
		height: 100rpx;
		position: relative;
		font-size: 16px;

		.title-left {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title-right {
			text-align: center;
			line-height: 100rpx;
		}
	}

	.content4-text {
		display: flex;
		box-sizing: border-box;
		margin-bottom: 18rpx;

		.content4-left {
			white-space: nowrap;
			font-weight: bold;
			margin-right: 10rpx;
		}
	}

	.content4-right-address {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}



	.dingdan {
		font-weight: bold;
		margin-right: 25rpx;
	}

	.tab {
		display: flex;
		justify-content: space-around;
		padding: 8rpx;
		box-shadow: -2rpx 5rpx 10rpx #666;

		.tab-item {
			padding: 16rpx;
			font-size: 33rpx;
			position: relative;
			/* padding-right: 50%; */
			color: #666;
			font-weight: bold;
		}

		.tab-item:nth-child(1)::after {
			content: "";
			position: absolute;
			top: 30%;
			right: -25%;
			height: 50%;
			/* 右边框高度与元素高度一致 */
			border-right: 1px solid #E7E7E7;
			/* 右边框样式 */
		}

		.tab-item:nth-child(2)::after {
			content: "";
			position: absolute;
			top: 30%;
			right: -25%;
			height: 50%;
			/* 右边框高度与元素高度一致 */
			border-right: 1px solid #E7E7E7;
			/* 右边框样式 */
		}

		.tab-item.active {

			color: #7DCCA7;
			font-weight: bold;
		}

	}

	.order-info {
		padding: 10rpx;
		display: flex;
		justify-content: space-around;
		/* background-color: #eee; */
		background-color: #FBFBFB;
		height: 100rpx;

		.info-item {

			/* border: 1px solid #ddd; */
			/* border-radius: 5px; */
			text-align: center;
			margin: 5px;
		}
	}

	.order-infoActive1 .info-item {
		width: 16%;
		font-size: 32rpx;
		/* font-weight: bold; */
		padding: 5rpx;
	}

	.order-infoActive2 .info-item {
		width: 15%;
		font-size: 28rpx;
		/* font-weight: bold; */
		padding-top: 15rpx;
	}

	.order-infoActive3 .info-item {
		width: 20%;
		/* font-weight: bold; */
		font-size: 32rpx;
		padding-top: 13rpx;
	}

	.active1 {
		color: #54C397;
		font-weight: bold;

		/* border-bottom: 6rpx solid #1da25f; */
		.text1 {
			/* text-decoration: underline; */
			padding-bottom: 13rpx;
			border-bottom: 7rpx solid #54C397;
		}
	}

	.just {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}

	.order-content {
		font-size: 16px;
		color: #333;
		border: 1px solid #ddd;
		border-radius: 5px;
		background-color: #FBFBFB;
		padding: 0 15rpx;
		height: 100%;

		.order-card1 {
			height: 550rpx;
		}

		.order-card {
			width: 98%;
			font-size: 14px;
			margin: 0 auto;
			margin-bottom: 20rpx;
			padding: 10px;
			/* border: 1px solid rgba(0, 0, 0, 0.5); */
			background-color: white;
			display: flex;
			flex-direction: column;
			box-shadow: -3px 3px 3px rgba(0, 0, 0, .3);
			border-radius: 25rpx;

			.content1 {
				margin: 0 10rpx;
				margin-bottom: 15rpx;
				padding-bottom: 15rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F3F3F3;

				.text2 {
					display: block;
					width: 120rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;
					box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);

					background-color: aliceblue;
					font-Weight: bold;
					color: #BCBCBC;

				}
			}

			.content2 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				/* border-bottom: 1px solid rgba(0, 0, 0, 0.5); */
				margin: 0 10rpx;

				.cot2 {

					.text1 {
						margin-bottom: 20rpx;
						display: flex;

						.text1-left {
							font-weight: bold;
							margin-right: 10rpx;
						}

						.text1-right {
							line-height: 19.2px;
							height: 19.2px;
						}
					}
				}

				.btn {
					font-size: 14px;
					width: 175rpx;
					box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
				}
			}

			.content3 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 12rpx;
				position: relative;
				border-bottom: 1px solid rgba(0, 0, 0, 0.5);
				background-color: #fafafa;
				word-wrap: break-word;

				.image {
					width: 180rpx;
					height: 180rpx;

				}

				.cot1 {
					display: flex;
					padding-top: 14rpx;
					/* padding-left: 20rpx; */
				}

				.text3 {
					/* line-height: 60rpx; */
				}

				.cot2 {
					width: 450rpx;
					/* margin: 8rpx; */
					height: 60%;
				}

				.cot3 {
					padding: 0rpx 10rpx;
					font-Weight: bold;
					width: 68%;
					position: absolute;
					bottom: 3rpx;
					display: flex;
					justify-content: space-between;

				}
			}

			.content4 {
				margin-left: 10rpx;
				padding-bottom: 10rpx;


				border-bottom: 1px solid #F3F3F3;

				.text1 {
					// font-weight: bold;
					margin-right: 10rpx;
					margin-top: 30rpx;
				}

				.left {
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					width: 150rpx;
				}

				.right {
					margin-left: 30rpx;
				}

			}

			.content5 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				margin: 0 10rpx;

				.input {
					display: flex;
					align-items: center;

					.textInput {
						font-size: 12px;
						color: #BABABA;
					}
				}

				.text1 {
					padding: 5rpx 10rpx;
					border: 1rpx solid #D2D2D2;
					border-radius: 10rpx;

				}
			}

			.popup {
				// width: 100%;
				padding-top: 100rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				height: 700rpx;
				background-color: #fff;

				.jifen {
					// width: 100%;
					font-size: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.messege {
					display: flex;
					width: 100%;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1px solid #E7E7E7;

					.left {
						font-size: 15px;
						color: #BABABA;
					}

					.right {
						font-size: 15px;
					}
				}

				.btn {
					margin-top: 50rpx;
					background-color: #54C397;
					color: #f8f8f8;
				}
			}
		}
	}
</style>